<template>
  <div style="margin-top: 50px">
    <el-row :gutter="20">
      <el-col :span="24" style="display: flex; align-items: center;">
        <span style="margin-left: 40px">模型选择：</span>
        <el-select v-model="mode">
          <el-option label="逻辑回归" value="lg"></el-option>
          <el-option label="决策树" value="dt"></el-option>
          <el-option label="KNN" value="knn"></el-option>
          <el-option label="贝叶斯算法建模" value="by"></el-option>
          <el-option label="支持向量机" value="svn"></el-option>
          <el-option label="随机森林" value="rf"></el-option>
        </el-select>

        <span style="margin-left: 40px">预测选择：</span>
        <el-select v-model="mission">
          <el-option label="中风预测" value="healthcare"></el-option>
          <el-option label="薪资预测" value="salary"></el-option>
        </el-select>


        <el-button type="warning" style="margin-left: 40px"
                   v-loading.fullscreen.lock="fullscreenLoading"
                   element-loading-text="拼命加载中"
                   @click="trainButtonHandler">训练</el-button>
      </el-col>

      <el-col :span="24" style="display: flex; align-items: center;">
        <span style="margin-left: 40px">上传数据集:</span>
        <el-upload
            style="margin-left: 20px;margin-top: 20px"
            class="upload-demo"
            drag
            action="http://localhost:8008/uploadFile"
            multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传csv文件</div>
        </el-upload>

      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <div style="margin-left: 40px">
          <span v-if="isSuccess" style="color: blue">训练成功, {{ modelScore }}</span>
          <span v-else-if="errorMessage" style="color: red">{{ errorMessage }}</span>
        </div>
      </el-col>
    </el-row>
  </div>


</template>

<script>
export default {
  name: 'modeTrain',

  data(){
    return{
      fullscreenLoading: false,
      responseData: null,
      modelScore: null,
      mode: '',
      mission: '',
      errorMessage: ''
    }
  },
  computed: {
    isSuccess() {
      return this.responseData === 1;
    }
  },
  methods: {
    //训练按钮事件
    async trainButtonHandler() {
      if (!this.mode || !this.mission) {
        this.errorMessage = '请选择数据模型和预测任务！';
        return;
      }
      this.errorMessage = '';
      this.fullscreenLoading = true;
      try {
        const response = await this.$http.get('/train', {
          params: { mission: this.mission, mode: this.mode }
        });
        if (response.status === 200) {
          this.responseData = response.data.data;
          this.modelScore = response.data.msg;
        } else {
          this.errorMessage = '服务器返回错误状态码';
        }
      } catch (error) {
        this.errorMessage = '请求失败：' + error.message;
      } finally {
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 2000);
      }
    }
  }
};
</script>



<style scoped>

</style>
